import React, { ReactElement, ReactNode } from 'react'
import { Input } from 'antd'
import { connect } from 'umi'
import Upload from './introduce/UpLoad'
import styles from './skin.less'

interface Props {
    changeIntroduce: Function
}

function Index({ changeIntroduce }: Props): ReactElement {
    const list = [
        {
            title: "标题",
            type: "title"
        },
        {
            title: "视频",
            type: "video"
        },
        {
            title: "投稿",
            type: "submit"
        },
        {
            title: "粉丝",
            type: "fan"
        },
        {
            title: "观看次数",
            type: "view"
        }
    ]
    return (
        <div>
            {
                list.map((item, index) => {
                    return <div key = { index } className={styles.flex}>
                        <span>
                            { item.title }:
                        </span>
                        <div style={{
                            flex: 1
                        }}>
                            {
                               item.type === 'video'? <Upload/>: <Input onChange={(ev) => {
                                    changeIntroduce(item.type, ev.target.value)
                               }} />
                            }
                        </div>
                    </div>
                })
            }

        </div>
    )
}

export default connect(() => {
    return {
        
    }
}, (dispatch) => {
    return {
        changeIntroduce(classify: string, value: string) {
            dispatch({ type: "hero/changeIntroduce", classify, value })
        }
    }
})(Index)
